<template>
    <div>
        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" v-bind="$attrs" v-on="$listeners"
            @close="onClose">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="字典名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入字典名称" :maxlength="30" show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="字典阔值" prop="codeValues">
                    <el-input v-model="formData.codeValues" placeholder="请输入字典阔值，如A、B" :maxlength="30" show-word-limit
                        clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status" required>
                    <el-switch v-model="formData.status" active-text="是否启用"></el-switch>
                </el-form-item>
                <el-form-item label="栏位排序" prop="sort" required>
                    <el-slider :max='100' :step='1' v-model="formData.sort"></el-slider>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formData.summary" type="textarea" placeholder="请输入备注" :maxlength="100"
                        show-word-limit :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import _ from 'lodash'
    export default {
        inheritAttrs: false,
        components: {},
        props: [],
        data() {
            return {
                dialog: {
                    title: '添加字典值',
                    visible: false
                },
                formData: {
                    id: undefined,
                    name: undefined,
                    codeValues: undefined,
                    status: true,
                    sort: 1,
                    summary: undefined,
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入字典名称',
                        trigger: 'blur'
                    }],
                    codeValues: [{
                        required: true,
                        message: '请输入字典阔值，如A、B',
                        trigger: 'blur'
                    }]
                },
                btnLoading: false
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() { },
        methods: {
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.dialog.visible = false
                this.$emit('update:visible', false)
            },
            handleAdd(m) {
                this.formData.id = undefined;
                this.formData.typeId = m.id;
                this.dialog.title = '添加字典值'
                this.dialog.visible = true
            },
            handelModify(record) {
                this.dialog.title = '编辑字典值'
                this.dialog.visible = true
                this.$nextTick(() => {
                    this.formData = _.cloneDeep(record)
                })
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    if (!this.formData.id) {
                        this.$api.sys.code
                            .submit(this.formData)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.loading = false
                            })
                    } else {
                        console.log(this.formData);
                        this.$api.sys.code
                            .modify(this.formData)
                            .then(({ statusCode, data, message }) => {
                                if (statusCode == 200) {
                                    this.close()
                                    this.$emit('complete')
                                    this.$notify({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$notify({
                                        message: message,
                                        type: 'error'
                                    })
                                }
                            })
                            .catch(() => {
                                this.loading = false
                            })
                    }

                    //this.close()
                })
            }
        }
    }
</script>
<style>
</style>